<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <title>列表组</title>
</head>
<body>
    <div class="container">
        <h2>水果</h2>
        <!-- 基础的列表组 -->
        <ul class="list-group">
            <li class="list-group-item">苹果</li>
            <li class="list-group-item">香蕉</li>
            <li class="list-group-item">葡萄</li>
            <li class="list-group-item">榴莲</li>
        </ul>
        <hr>
        <!-- 使用a标签实现列表组 -->
        <ul class="list-group">
            <a href="https://www.baidu.com/" class="list-group-item list-group-item-action">苹果</a>
            <!-- a标签不支持disabled属性，所以可以添加.disabled类来让选项显示被禁用的效果，但是不会禁止超链接跳转 -->
            <a href="https://www.baidu.com/" class="list-group-item list-group-item-action disabled">香蕉</a>
            <a href="https://www.baidu.com/" class="list-group-item list-group-item-action active">葡萄</a>
        </ul>
        <hr>
        <!-- 调整列表组的颜色 -->
        <ul class="list-group">
            <li class="list-group-item">Normal</li>
            <li class="list-group-item list-group-item-light">light</li>
            <li class="list-group-item list-group-item-secondary">secondary</li>
            <li class="list-group-item list-group-item-dark">dark</li>
            <li class="list-group-item list-group-item-primary">primary</li>
            <li class="list-group-item list-group-item-info">info</li>
            <li class="list-group-item list-group-item-success">success</li>
            <li class="list-group-item list-group-item-warning">warning</li>
            <li class="list-group-item list-group-item-danger">danger</li>
        </ul>
        <hr>
        <ul class="list-group">
            <!-- .d-flex可以让一个非响应式的盒子变成响应式 -->
            <!-- justify-content-between让内容平均分布再盒子中 -->
            <!-- align-items-center让容器内的内容 垂直对齐 -->
            <li class="list-group-item d-flex justify-content-between align-items-center">
                RK
                <span class="badge badge-primary badge-pill">6</span>
            </li>
            <li class="list-group-item d-flex justify-content-between align-items-center">
                老板
                <span class="badge badge-primary badge-pill">22</span>
            </li>
            <li class="list-group-item d-flex justify-content-between align-items-center">
                爸爸
                <span class="badge badge-danger badge-pill">21</span>
            </li>
        </ul>
        <hr>
        <!-- 在列表组中使用图片 -->
        <ul class="list-group">
            <li class="list-group-item d-flex justify-content-between align-items-center">
                niit
                <div class="imgage-parent">
                    <img src="../images/img.png" class="img-fluid" alt="">
                </div>
            </li>
        </ul>
        <hr>
        <!-- 添加自定义内容到列表组 -->
        <ul class="list-group">
            <a class="list-group-item d-flex justify-content-between align-items-center">
                <!-- .flex-colum包裹的内容会垂直排列 -->
                <div class="flex-colum">
                    NIIT China
                    <p><small>Shanghai</small></p>
                    <span class="badge badge-info badge-pill">1 course to offer</span>
                </div>
                <div class="imgage-parent">
                    <img src="../images/img.png" class="img-fluid" alt="">
                </div>
            </a>
        </ul>
    </div>
    
</body>
</html>